<template>
	<view class="e-m-t-20 seckill-box e-flex">
		<view class="e-flex-1 seckill-box-child-1 e-flex e-p-l-20">
			<view class="triangle"></view>
			<text class="c-white e-font-36">{{ $t('seckill.seckill') }}</text>
			<text class="e-font-24 c-white e-m-l-30">{{ $t('seckill.stock') }} {{ flashSaleStock }}</text>
		</view>
		<view class="e-flex-1 e-flex e-p-r-10 e-flex-end">
			<text class="c-red e-font-24">{{ $t('seckill.fromEnd') }}</text>
			<view class="seckill-time-box e-flex e-flex-xy-center">
				<text class="c-white e-font-24">{{ seckillTime.day }}</text>
			</view>
			<text class="c-red">:</text>
			<view class="seckill-time-box e-flex e-flex-xy-center">
				<text class="c-white e-font-24">{{ seckillTime.hours }}</text>
			</view>
			<text class="c-red">:</text>
			<view class="seckill-time-box e-flex e-flex-xy-center">
				<text class="c-white e-font-24">{{ seckillTime.minute }}</text>
			</view>
			<text class="c-red">:</text>
			<view class="seckill-time-box e-flex e-flex-xy-center">
				<text class="c-white e-font-24">{{ seckillTime.seconds }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			flashSaleStock:[String,Number],
			seckillTime:Object
		}
	}
</script>

<style lang="scss" scoped>
	.seckill-box {
		height: 80rpx;
		background: #fff2f3;
		border-radius: 20rpx 20rpx 0px 0px;
		.seckill-box-child-1 {
			height: 80rpx;
			background: linear-gradient(270deg, #f5222d 0%, #ff6b65 100%);
			border-radius: 20rpx 20rpx 0px 0px;
			position: relative;
			.triangle {
				position: absolute;
				bottom: -1rpx;
				right: -1px;
				width: 0px;
				height: 0px;
				border-left: 20rpx solid transparent;
				border-bottom: 60rpx solid #fff2f3;
				border-right: 0px solid transparent;
			}
		}
		.seckill-time-box {
			width: 36rpx;
			height: 36rpx;
			border-radius: 10rpx;
			background-color: #f5222d;
			margin: 0 10rpx;
		}
	}
</style>